<template>
  <div class="card vld-parent mb-3">
    <loading :active.sync="isLoading"
             :background-color="bgColor"
             :can-cancel="canCancel"
             :color="color"
             :height="height"
             :is-full-page="fullPage"
             :loader="loader"
             :width="width">
      <h3 v-if="useSlot">Loading ...</h3>
    </loading>
  </div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

@Component({
  components: {
    Loading
  },
})
export default class APP extends Vue {
  @Prop(Boolean) isLoading!: boolean
  fullPage: boolean = true
  canCancel: boolean = false
  useSlot: boolean = false
  loader: string = 'dots'
  color: string = '#007bff'
  bgColor: string = '#ffffff'
  height: number = 68
  width: number = 68//ms
  setLoading (val:boolean){
    this.isLoading = val
  }
}
</script>
